<template>
  <el-card class="auth-add">

<!--高级搜索 按照下列来
    <el-table-column  prop="id"  label="ID"  width="180"></el-table-column>
    <el-table-column  prop="fid"  label="服务名称"></el-table-column>
    <el-table-column  prop="uri"  label="URI"></el-table-column>
    <el-table-column  prop="route"  label="路由"></el-table-column>
    <el-table-column  prop="authRole"  label="角色"></el-table-column>
    <el-table-column  prop="operUser"  label="上一次操作UserAccount"></el-table-column>
    <el-table-column  prop="checkLogin"  label="是否仅检查登录"></el-table-column>
    <el-table-column  prop="isDef"  label="是否默认"></el-table-column>
    <el-table-column  prop="isOpen"  label="是否开启"></el-table-column>-->
    <el-header>
      新增路由
    </el-header>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="服务名称">
        <el-input v-model="searchForm.serviceName" placeholder="服务名称"></el-input>
      </el-form-item>
      <el-form-item label="请求方式">
        <el-select v-model="searchForm.method" placeholder="请求方式">
          <el-option label="GET" value="GET"></el-option>
          <el-option label="POST" value="POST"></el-option>
          <el-option label="PUT" value="PUT"></el-option>
          <el-option label="DELETE" value="DELETE"></el-option>
          <el-option label="PATCH" value="PATCH"></el-option>
          <el-option label="HEAD" value="HEAD"></el-option>
          <el-option label="OPTIONS" value="OPTIONS"></el-option>
          <el-option label="TRACE" value="TRACE"></el-option>
          <el-option label="CONNECT" value="CONNECT"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="URI">
        <el-input v-model="searchForm.uri" placeholder="URI"></el-input>
      </el-form-item>
      <el-form-item label="路由">
        <el-input v-model="searchForm.route" placeholder="路由"></el-input>
      </el-form-item>
      <el-form-item label="角色">
<!--      以编辑框的形式输入，输入后按下回车加入authRole，但是在前端以el-tag显示-->
        <el-input v-model="currentTag" placeholder="角色" @keyup.native.enter="addTag" @keydown.native.delete="delTag">
        </el-input>
        <el-tag
            v-for="tag in searchForm.authRole"
            :key="tag"
            closable
            @close="handleCloseTag(item)"
            :disable-transitions="false">{{tag}}</el-tag>
      </el-form-item>
      <el-form-item label="上一次操作UserAccount">
        <el-input v-model="searchForm.operUser" placeholder="上一次操作UserAccount"></el-input>
      </el-form-item>
      <el-form-item label="是否仅检查登录">
        <el-select v-model="searchForm.checkLogin" placeholder="是否仅检查登录">
          <el-option label="是" value="true"></el-option>
          <el-option label="否" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否非注解鉴权">
        <el-select v-model="searchForm.isDef" placeholder="是否非注解鉴权">
          <el-option label="是" value="true"></el-option>
          <el-option label="否" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否开启">
        <el-select v-model="searchForm.isOpen" placeholder="是否开启">
          <el-option label="是" value="true"></el-option>
          <el-option label="否" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-button
          type="primary"
          icon="el-icon-plus"
          @click="search"
      >新增</el-button>
    </el-form>
  </el-card>
</template>

<script>
import {AuthApi} from "@/core/request/api/AuthApi";

export default {
  name: "auth-add",
  data(){
    return {
      currentTag:null,
      searchForm: {
        uri: '',
        serviceName: '',
        route: '',
        authRole: [],
        operUser: '',
        checkLogin: '',
        isDef: '',
        isOpen: '',
        current:1,
        pageSize:10
      }
    }
  },
  methods: {
    handleCloseTag(item){
      this.searchForm.authRole.splice(this.searchForm.authRole.indexOf(item), 1);
    },
    addTag(){
      this.searchForm.authRole.push(this.currentTag);
      this.currentTag=null;
    },
    delTag(){
      if (this.currentTag===null){
        this.searchForm.authRole.splice(this.searchForm.authRole.length-1, 1)
      }
    },
    search(){
      AuthApi.add(this.searchForm).then(res=>{
        if (!res.data.code){
          this.$message.success(res.data.msg)
          this.axios.get(AuthApi.list, {
            params: {
              current: 1,
              pageSize: 10
            }
          }).then(res => {
            this.$parent.$parent.datas = res.data.data.records
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>